.content {
	.header ~ & {
		padding-top: $header-height;
	}
}

.content-fix-scroll {
	margin-right: ($grid-gutter * -1);
	margin-left: ($grid-gutter * -1);
	overflow: hidden;
	padding-right: $grid-gutter;
	padding-left: $grid-gutter;
	.content-fix.fixed & {
		backface-visibility: hidden;
		position: fixed;
			top: ($line-height * 2);
			bottom: 0;
	}
}

.content-fix-wrap {
	.content-fix.fixed & {
		overflow-x: hidden;
		overflow-y: auto;
		padding-right: ($grid-gutter * 2);
		padding-left: ($grid-gutter * 2);
		position: absolute;
			top: 0;
			right: ($grid-gutter * -1);
			bottom: 0;
			left: ($grid-gutter * -1);
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;
	}
}

.content-heading {
	background-color: $brand-color;
	color: $white;
	overflow: hidden;
	padding-top: $margin-sm;
	padding-bottom: $margin-sm;
	position: relative;
	transition: background-color 0.3s $timing, color 0.3s $timing;
	z-index: 1;
	.heading {
		font-weight: $font-weight-light;
	}
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);

		.page-#{$color} .content-heading {
			background-color: nth($palette-color, $i);
		}
	}

.content-inner {
	margin-top: $margin-lg;
	margin-bottom: $margin-lg;
}

.content-sub-heading {
	color: $brand-color;
	font-size: $font-size-h4;
	font-weight: $font-weight-medium;
	line-height: $line-height-h4;
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);

		.page-#{$color} .content-sub-heading {
			color: nth($palette-color, $i);
		}
	}

.row-fix {
	position: relative;
}
